<template>
    <echart :options="option" class="echarts"> </echart>
</template>

<style scoped>
.echarts {
  height: 100%;
  width: 100%;
  border-radius: 25px;
}
</style>
<script>
var labelFacade = {
  normal: {
    color: {
      // 完成的圆环的颜色
      colorStops: [
        {
          offset: 0,
          color: "#00cefc" // 0% 处的颜色
        },
        {
          offset: 1,
          color: "#367bec" // 100% 处的颜色
        }
      ]
    }
  }
};
var lableFont = {
  normal: {
    formatter: "{d}%",
    position: "center",
    show: true,
    textStyle: {
      fontSize: "15",
      fontWeight: "normal",
      color: "#fff"
    }
  }
};
var labelFromatter = {
  normal: {
    label: {
      show: false
    },
    labelLine: {
      show: false
    }
  }
};

var titleStyle  = {
  fontWeight: "normal",
            fontSize: 15,
            color: "#fff"
}
var radius = [40, 55];

export default {
  data: function() {
    return {
      option: {
        title: [{
          text: "系统健康值                                                      ",
          x: "4%",
          y: "2%",
          backgroundColor:"#0A3C60",
          textStyle: {
            fontWeight: "normal",
            fontSize: 20,
            color: "#fff"
          }
        },
        { text: "EMCS",left: '10%',top: '43%',textStyle: titleStyle },
        { text: "FAS",left: '39%',top: '43%',textStyle: titleStyle },
        { text: "PSCADA",left: '64%',top: '43%',textStyle: titleStyle },
        { text: "CCTV",left: '10%',top: '83%',textStyle: titleStyle },
        { text: "PA",left: '40%',top: '83%',textStyle: titleStyle },
        { text: "ATS",left: '66%',top: '83%',textStyle: titleStyle },
        ],
        color: ["rgba(176, 212, 251, 1)"],
        backgroundColor: "#0D2A42",
        series: [
          {
            type: "pie",
            center: ["15%", "30%"],
            radius: radius,
            clockWise: true, //顺逆时针
            hoverAnimation: false, //鼠标悬停跳动
            x: "0%", // for funnel
            itemStyle: labelFromatter,
            data: [
              { name: "EMCS",value: 75,itemStyle: labelFacade,label: lableFont },
              { name: 'residue',value: 25 }
            ]
          },
          {
            type: "pie",
            center: ["42.5%", "30%"],
            clockWise: true, //顺逆时针
            hoverAnimation: false, //鼠标悬停跳动
            radius: radius,
            x: "20%", // for funnel
            itemStyle: labelFromatter,
            data: [
              { name: "FAS",value: 76,itemStyle: labelFacade,label: lableFont},
              { name: 'residue',value: 24 }
            ]
          },
          {
            type: "pie",
            center: ["70%", "30%"],
            clockWise: true, //顺逆时针
            hoverAnimation: false, //鼠标悬停跳动
            radius: radius,
            x: "40%", // for funnel
            itemStyle: labelFromatter,
            data: [
              { name: "PSCADA", value: 86, itemStyle: labelFacade, label: lableFont },
              { name: "residue", value: 14 }
            ]
          },
          {
            type: "pie",
            center: ["15%", "70%"],
            clockWise: true, //顺逆时针
            hoverAnimation: false, //鼠标悬停跳动
            radius: radius,
            y: "55%", // for funnel
            x: "0%", // for funnel
            itemStyle: labelFromatter,
            data: [
              { name: "CCTV", value: 85, itemStyle: labelFacade, label: lableFont },
              { name: "residue", value: 15 }
            ]
          },
          {
            type: "pie",
            center: ["42.5%", "70%"],
            clockWise: true, //顺逆时针
            hoverAnimation: false, //鼠标悬停跳动
            radius: radius,
            y: "55%", // for funnel
            x: "20%", // for funnel
            itemStyle: labelFromatter,
            data: [
              { name: "PA", value: 46, itemStyle: labelFacade, label: lableFont },
              { name: "residue", value: 54 }
            ]
          },
          {
            type: "pie",
            center: ["70%", "70%"],
            clockWise: true, //顺逆时针
            hoverAnimation: false, //鼠标悬停跳动
            radius: radius,
            y: "55%", // for funnel
            x: "40%", // for funnel
            itemStyle: labelFromatter,
            data: [
              { name: "ATS", value: 74, itemStyle: labelFacade, label: lableFont },
              { name: "residue", value: 26 }
            ]
          }
        ]
      }
    };
  }
};
</script>
